<template>
  <div class="detail-page">
    <!-- 返回按钮 -->
    <button class="back-btn"
@click="$router.back()">
      <img
src="@/assets/back-icon.png" alt="返回" />
    </button>

    <!-- 详情卡片 -->
    <div class="detail-card">
      <div class="card-header">
        <h2>{{ title }}</h2>
        <span class="status-badge"
:class="statusClass">{{ statusText }}</span>
      </div>

      <div class="card-body">
        <div v-for="(item, index) in infoItems"
class="info-row" :key="index">
          <span class="label">{{ item.label }}</span>
          <span class="value">{{ item.value }}</span>
        </div>
      </div>
    </div>

    <!-- 操作按钮 -->
    <div v-if="showActions"
class="action-btns">
      <button v-for="(action, index) in actions"
class="action-btn" :key="index">
        {{ action }}
      </button>
    </div>

    <!-- 关联信息 -->
    <div v-if="relatedItems.length > 0"
class="related-info">
      <h3>关联信息</h3>
      <div class="related-list">
        <div
          v-for="(item, index) in relatedItems"
          :key="index"
          class="related-item"
          @click="viewRelated(item)"
        >
          <div class="item-header">
            <span class="item-title">{{ item.title }}</span>
            <span class="item-status"
:class="item.statusClass">{{ item.status }}</span>
          </div>
          <div class="item-content">
            <span v-for="(field, i) in item.fields"
:key="i">
              {{ field.label }}: {{ field.value }}
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref } from 'vue'

  const props = defineProps({
    type: {
      type: String,
      default: 'client', // client/contract/case
    },
  })

  const title = ref(
    props.type === 'client' ? '客户详情' : props.type === 'contract' ? '合同详情' : '案件详情'
  )

  const statusText = ref(
    props.type === 'client' ? '活跃' : props.type === 'contract' ? '生效中' : '处理中'
  )

  const statusClass = ref(
    props.type === 'client' ? 'success' : props.type === 'contract' ? 'primary' : 'warning'
  )

  const showActions = ref(props.type !== 'case')

  const actions = ref(
    props.type === 'client'
      ? ['编辑信息', '新建合同', '新建案件']
      : props.type === 'contract'
        ? ['编辑合同', '关联案件']
        : []
  )

  const infoItems = ref(
    props.type === 'client'
      ? [
          { label: '客户名称', value: '张三' },
          { label: '联系电话', value: '13800138000' },
          { label: '电子邮箱', value: 'zhangsan@example.com' },
          { label: '客户类型', value: '个人客户' },
          { label: '注册时间', value: '2025-01-15' },
          { label: '最后活跃', value: '2025-09-10' },
        ]
      : props.type === 'contract'
        ? [
            { label: '合同编号', value: 'HT20250001' },
            { label: '合同名称', value: '技术服务协议' },
            { label: '客户名称', value: '张三' },
            { label: '签约日期', value: '2025-03-20' },
            { label: '生效日期', value: '2025-04-01' },
            { label: '合同金额', value: '¥15,000.00' },
            { label: '服务期限', value: '12个月' },
          ]
        : [
            { label: '案件编号', value: 'AJ20250001' },
            { label: '案件名称', value: '技术服务纠纷' },
            { label: '客户名称', value: '张三' },
            { label: '关联合同', value: 'HT20250001' },
            { label: '案件类型', value: '合同纠纷' },
            { label: '案件状态', value: '处理中' },
            { label: '创建时间', value: '2025-05-10' },
            { label: '最后更新', value: '2025-09-05' },
          ]
  )

  const relatedItems = ref(
    props.type === 'client'
      ? [
          {
            title: 'HT20250001 - 技术服务协议',
            status: '生效中',
            statusClass: 'primary',
            fields: [
              { label: '签约日期', value: '2025-03-20' },
              { label: '合同金额', value: '¥15,000.00' },
            ],
          },
          {
            title: 'AJ20250001 - 技术服务纠纷',
            status: '处理中',
            statusClass: 'warning',
            fields: [
              { label: '创建时间', value: '2025-05-10' },
              { label: '最后更新', value: '2025-09-05' },
            ],
          },
        ]
      : props.type === 'contract'
        ? [
            {
              title: '张三',
              status: '活跃',
              statusClass: 'success',
              fields: [
                { label: '联系电话', value: '13800138000' },
                { label: '客户类型', value: '个人客户' },
              ],
            },
            {
              title: 'AJ20250001 - 技术服务纠纷',
              status: '处理中',
              statusClass: 'warning',
              fields: [
                { label: '创建时间', value: '2025-05-10' },
                { label: '案件类型', value: '合同纠纷' },
              ],
            },
          ]
        : [
            {
              title: '张三',
              status: '活跃',
              statusClass: 'success',
              fields: [
                { label: '联系电话', value: '13800138000' },
                { label: '客户类型', value: '个人客户' },
              ],
            },
            {
              title: 'HT20250001 - 技术服务协议',
              status: '生效中',
              statusClass: 'primary',
              fields: [
                { label: '签约日期', value: '2025-03-20' },
                { label: '合同金额', value: '¥15,000.00' },
              ],
            },
          ]
  )

  const viewRelated = item => {
    console.log('查看关联信息:', item)
  }
</script>

<style scoped lang="scss">
  .detail-page {
    padding: 15px;
    position: relative;

    .back-btn {
      position: absolute;
      top: 15px;
      left: 15px;
      background: none;
      border: none;
      z-index: 10;

      img {
        width: 24px;
        height: 24px;
      }
    }

    .detail-card {
      background: white;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
      padding: 20px;
      margin-bottom: 15px;

      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;

        h2 {
          font-size: 18px;
          margin: 0;
        }

        .status-badge {
          padding: 4px 8px;
          border-radius: 4px;
          font-size: 12px;

          &.success {
            background: #f6ffed;
            border: 1px solid #b7eb8f;
            color: #52c41a;
          }

          &.primary {
            background: #e6f7ff;
            border: 1px solid #91d5ff;
            color: #1890ff;
          }

          &.warning {
            background: #fffbe6;
            border: 1px solid #ffe58f;
            color: #faad14;
          }
        }
      }

      .card-body {
        .info-row {
          display: flex;
          margin-bottom: 12px;

          .label {
            width: 80px;
            color: #999;
            font-size: 14px;
          }

          .value {
            flex: 1;
            font-size: 14px;
          }
        }
      }
    }

    .action-btns {
      display: flex;
      gap: 10px;
      margin-bottom: 15px;

      .action-btn {
        flex: 1;
        padding: 10px;
        background: #1989fa;
        color: white;
        border: none;
        border-radius: 4px;
        font-size: 14px;
      }
    }

    .related-info {
      background: white;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
      padding: 15px;

      h3 {
        font-size: 16px;
        margin: 0 0 15px 0;
        color: #333;
      }

      .related-list {
        .related-item {
          padding: 12px 0;
          border-bottom: 1px solid #f0f0f0;

          &:last-child {
            border-bottom: none;
          }

          .item-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;

            .item-title {
              font-size: 15px;
              font-weight: bold;
            }

            .item-status {
              font-size: 12px;
              padding: 2px 6px;
              border-radius: 3px;

              &.success {
                background: #f6ffed;
                border: 1px solid #b7eb8f;
                color: #52c41a;
              }

              &.primary {
                background: #e6f7ff;
                border: 1px solid #91d5ff;
                color: #1890ff;
              }

              &.warning {
                background: #fffbe6;
                border: 1px solid #ffe58f;
                color: #faad14;
              }
            }
          }

          .item-content {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            font-size: 13px;
            color: #666;

            span {
              white-space: nowrap;
            }
          }
        }
      }
    }
  }
</style>
